<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" class="form" :inline="true" size="mini">
        <el-form-item label="素材名称:" class="name">
          <el-input
            v-model="form.name"
            style="width: 200px"
            @change="getUMOUser()"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="上传者ID:" class="name">
          <el-input
            v-model="form.UPid"
            style="width: 200px"
            @change="getUMOUser()"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="类别:">
          <el-col :span="24">
            <el-select v-model="form.type1" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="'类别' + item.type1"
                :value="item.type1"
              >
              </el-option>
            </el-select>
            <span>-</span>
            <el-select v-model="form.type2" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="'子类别' + item.type2"
                :value="item.type2"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <div class="buttonL">
          <el-button type="primary" size="small" @click="query()"
            >查询</el-button
          >
          <el-button size="small" @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </el-card>
    <el-card>
      <el-table border :data="tableData" row-key="id">
        <el-table-column label="素材名称" prop="name" align="center" />
        <el-table-column label="素材图" prop="img" align="center" width="150">
          <template slot-scope="{ row }">
            <img
              :src="row.img"
              style="
                border-radius: 50%;
                width: 100px;
                height: 100px;
                padding: 10px;
              "
              alt=""
              @click="showQrCode(row.img)"
            />
          </template>
        </el-table-column>
        <el-table-column label="素材类别" align="center">
          <template slot-scope="scope">
            <span>类别{{ scope.row.type1 }}</span
            >-<span>子类别{{ scope.row.type2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price" align="center" />
        <el-table-column label="上传者ID" prop="UPid" align="center" />
        <el-table-column label="联系电话" prop="phone" align="center" />
        <el-table-column label="素材上架日期" align="center">
          <template slot-scope="{ row }">
            {{ row.time | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="售出次数" prop="sellNum" align="center" />
        <el-table-column label="素材收益" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.sellMoney }}元</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button type="danger" size="small" @click="delUMO(row)"
              >违规下架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.page"
        :page-size="page.size"
        :page-sizes="[2, 3, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="changePage"
        @size-change="changeSize"
      />
    </el-card>
    <el-dialog
      title="二维码"
      :visible.sync="showCodeDialog"
      @opened="showQrCode"
      @close="imgUrl = ''"
    >
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUMOUser,
  getUMOTotal,
  searchUMOUser,
  reWriteUMOUser,
  reWriteUMOTotal
} from '@/api/UserML.js'
import { queryFn } from '@/utils'
import QrCode from 'qrcode'
export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      // 翻页
      currentPage: 1,
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      showCodeDialog: false,
      // 查询数据
      form: {
        name: '',
        type1: '',
        type2: '',
        UPid: null
      }
    }
  },
  methods: {
    // 搜索功能
    async query () {
      const obj = queryFn(this.form)
      const { data } = await searchUMOUser(obj)
      console.log(data)
      this.tableData = data
      this.page.total = data.length
    },
    resetForm () {
      this.form.name = ''
      this.form.type1 = ''
      this.form.type2 = ''
      this.form.UPid = null
      this.getUMOUser()
    },
    // 翻页
    changePage (newPage) {
      this.page.page = newPage
      const obj = {
        _page: this.page.page,
        _limit: this.page.size
      }
      this.getUMOUser(obj)
    },
    // 变换页面条数
    changeSize (newSize) {
      this.page.size = newSize
      const obj = {
        _limit: this.page.size
      }
      this.getUMOUser(obj)
    },
    async getUMOUser (obj) {
      const { data } = await getUMOUser(obj)
      // console.log(data.filter((item) => item.MaterialStatus === 1))
      this.tableData = data.filter((item) => item.MaterialStatus === 1)
      const res = await getUMOTotal()
      this.page.total = res.data[1].total
    },
    showQrCode (url) {
      // url存在的情况下 才弹出层
      if (url) {
        this.showCodeDialog = true // 数据更新了 但是我的弹层会立刻出现吗 ？页面的渲染是异步的！！！！
        // 有一个方法可以在上一次数据更新完毕，页面渲染完毕之后
        this.$nextTick(() => {
          // 此时可以确认已经有ref对象了
          QrCode.toCanvas(this.$refs.myCanvas, url) // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        })
      }
    },
    async delUMO (data) {
      try {
        this.$confirm('此操作将下架该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            data.MaterialStatus = 0
            await reWriteUMOUser(data)
            this.$message.success('下架成功!')
            const obj = {
              id: 2,
              total: this.page.total - 1
            }
            await reWriteUMOTotal(obj)
            this.getUMOUser()
          })
          .catch(() => {})
      } catch (error) {
        this.$message.error('下架失败,请重试!')
      }
    }
  },
  created () {
    this.getUMOUser()
  }
}
</script>

<style lang="less" scoped>
.form {
  box-sizing: border-box;
}
.el-row {
  padding-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.buttonL {
  padding-left: 30px;
  display: inline-block;
}
.el-button + .el-button {
  margin-left: 30px;
}
</style>
